<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	    <link rel="stylesheet" type="text/css" href="css/cglist.css"/>
	    <script type="text/javascript" src="js/jquery.1.9.1.js" ></script>
	    <script type="text/javascript" src="js/rem.js" ></script>
	    <script type="text/javascript" src="js/mescroll.min.js" ></script>
		<link rel="stylesheet" type="text/css" href="css/mescroll.min.css"/>
		<title>采购订单列表</title>
	</head>
	<body>
		<div class="top">
			<div class="top_left">
				<span class="top_left_con1">审批状态</span>
				<img class="top_left_xia1" src="img/jtxia.png" />
				<img class="top_left_up1" src="img/jtup.png" />
			</div>
			<div class="top_right">
				<span class="top_left_con2">供货商</span>
				<img class="top_left_xia2" src="img/jtxia.png" />
				<img class="top_left_up2" src="img/jtup.png" />
			</div>
			<div class="sou"></div>
			<div class="cate_mid">
			    <form id="searchForm" name="searchForm" method="get" action="" onsubmit="">
			        <div class="text_box" name="list_search_text_box" onclick="">
			            <input id="keyword" name="search" type="text" placeholder="请输入采购单号" class="text" value="{$search}">
			            <input type="submit" value="" class="submit" id="list_search_submit">
			            <div class="close">取消</div>
			        </div>
			    </form>
			</div>
		</div>
		<ul class="company">
			<li style="color: #457bc7;">全部<img src="img/jtyou.png" /></li>
			<li>待审批<img src="img/jtyou.png" /></li>
			<li>已驳回<img src="img/jtyou.png" /></li>
			<li>审批通过<img src="img/jtyou.png" /></li>
			<li>已完结<img src="img/jtyou.png" /></li>
		</ul>
		<ul class="examine">
			<li style="color: #457bc7;">全部<img src="img/jtyou.png" /></li>
			<li>北京分公司<img src="img/jtyou.png" /></li>
			<li>上海分公司<img src="img/jtyou.png" /></li>
		</ul>
		<div id="mescroll">
			<ul class="list">
		        <li>
		        		<a href="#">
		        			<p class="number">
		        				单据编号：<span style="color: #333;font-size: 0.3rem;">123456789</span>
		        				<span class="num_right shenpi">待1级审批</span>
		        			</p>
			            <p class="info">北京康复印刷厂</p>
			            <p class="info">￥1000</p>
			            <div class="date">
			                <span class="date_left">采购人员：xxx</span>
			                <span class="date_right">11/06 23:59</span>
			            </div>
		            </a>
		       </li>
		       <li>
		        		<a href="#">
		        			<p class="number">
		        				单据编号：<span style="color: #333;font-size: 0.3rem;">123456789</span>
		        				<span class="num_right bohui">已驳回</span>
		        			</p>
			            <p class="info">北京康复印刷厂</p>
			            <p class="info">￥1000</p>
			            <div class="date">
			                <span class="date_left">采购人员：xxx</span>
			                <span class="date_right">2019-09-27</span>
			            </div>
		            </a>
		       </li>
		       <li>
		        		<a href="#">
		        			<p class="number">
		        				单据编号：<span style="color: #333;font-size: 0.3rem;">123456789</span>
		        				<span class="num_right pass">审批通过</span>
		        			</p>
			            <p class="info">北京康复印刷厂</p>
			            <p class="info">￥1000</p>
			            <div class="date">
			                <span class="date_left">采购人员：xxx</span>
			                <span class="date_right">2019-09-27</span>
			            </div>
		            </a>
		       </li>
		       <li>
		        		<a href="#">
		        			<p class="number">
		        				单据编号：<span style="color: #333;font-size: 0.3rem;">123456789</span>
		        				<span class="num_right caogao">草稿</span>
		        			</p>
			            <p class="info">北京康复印刷厂</p>
			            <p class="info">￥1000</p>
			            <div class="date">
			                <span class="date_left">采购人员：xxx</span>
			                <span class="date_right">2019-09-27</span>
			            </div>
		            </a>
		       </li>
		       <li>
		        		<a href="#">
		        			<p class="number">
		        				单据编号：<span style="color: #333;font-size: 0.3rem;">123456789</span>
		        				<span class="num_right finish">已作废</span>
		        			</p>
			            <p class="info">北京康复印刷厂</p>
			            <p class="info">￥1000</p>
			            <div class="date">
			                <span class="date_left">采购人员：xxx</span>
			                <span class="date_right">11/06 23:59</span>
			            </div>
		            </a>
		       </li>
		    </ul>
		</div>
		<a href="add.html"><div class="pay">新增</div></a>
	</body>
	<script>
		$(function(){
			var winHeight = $(window).height();
			var topHeight = $('.top').height();
			var topPadding = parseFloat($('.top').css('padding-top'))*2;
			var conHeight = winHeight-topHeight;
			$('.company').css({'height':conHeight+'px','top':topHeight+topPadding+1+'px'});
			$('.examine').css({'height':conHeight+'px','top':topHeight+topPadding+1+'px'});
			$('.top_left').click(function(){
				$('.company').toggle();
				$('.examine').hide();
				$('.top_left_xia1').toggle();
				$('.top_left_up1').toggle();
				$('.top_left_xia2').show();
				$('.top_left_up2').hide();
				$('.top_left_con1').css('color','#000');
				$('.top_left_con2').css('color','#555');
			});
			$('.company li').click(function(){
				$('.top_left_xia1').show();
				$('.top_left_up1').hide();
				$(this).css('color','#457bc7').siblings().css('color','#000');
				$('.company').hide();
				var CompanyName = $(this).text();
				$('.top_left_con1').text(CompanyName);
				$('.top_left_con1').css('color','#555');
			});
			$('.top_right').click(function(){
				$('.examine').toggle();
				$('.company').hide();
				$('.top_left_xia2').toggle();
				$('.top_left_up2').toggle();
				$('.top_left_xia1').show();
				$('.top_left_up1').hide();
				$('.top_left_con1').css('color','#555');
				$('.top_left_con2').css('color','#000');
			});
			$('.examine li').click(function(){
				$('.top_left_xia2').show();
				$('.top_left_up2').hide();
				$(this).css('color','#457bc7').siblings().css('color','#000');
				$('.examine').hide();
				var CompanyName = $(this).text();
				$('.top_left_con2').text(CompanyName);
				$('.top_left_con2').css('color','#555');
			});
			$('.sou').click(function(){
				$('.cate_mid').show();
				$('.examine').hide();
				$('.company').hide();
				$('.top_left_up1').hide();
				$('.top_left_xia1').show();
				$('.top_left_up2').hide();
				$('.top_left_xia2').show();
				$('.top_left_con1').css('color','#555');
				$('.top_left_con2').css('color','#555');
			});
			$('.close').click(function(){
				$('.cate_mid').hide();
			});
		});
	</script>

<script>
  var param = window.location.search;
  var mescroll = new MeScroll("mescroll", { //第一个参数"mescroll"对应上面布局结构div的id
    //如果下拉刷新是重置列表数据,那么down完全可以不用配置
    down: {
      callback: downCallback //下拉刷新的回调
    },
    up: {
      auto:false,//在初始化完毕之后自动执行下拉刷新的回调  true  false
      htmlNodata: '<p class="upwarp-nodata">没有更多了..</p>',
      page: {
        num: 0,
        size: 10,
        time: null
      },
      callback: upCallback    //上拉加载的回调
    }
  });

  var pageSize = 10;
  function downCallback(page) {
    $.ajax({
      url: 'http://oa.com/agent/manage/index'+param+'&Pagesize='+pageSize+'&page=1',
      type: 'get',
      data:{},
      success: function (res) {
        mescroll.resetUpScroll();
      },
      error: function () {
        // 联网失败的回调,隐藏下拉刷新的状态
        mescroll.endErr();
      }

    })
  }

  function upCallback(page) {
    $.ajax({
      url: 'http://oa.com/agent/manage/index'+param+'&Pagesize='+pageSize+'&page='+page.num,
      type: 'get',
      success: function (res) {
        var list = res.rows.data;
        if(list.length > 0) { //有数据
          $('.list').append(render(list));
        }
        if (res.rows.data && res.rows.data.length == page.size) {
          //联网成功的回调,隐藏下拉刷新的状态（参数：当前页的数据个数, 是否有下一页true/false）;
          mescroll.endSuccess(res.rows.data.length, true);
        } else {
          //联网成功的回调,隐藏下拉刷新的状态（参数：当前页的数据个数, 是否有下一页true/false）;
          mescroll.endSuccess(res.rows.data.length, false);
        }
      },
      error: function () {
        // 联网失败的回调,隐藏下拉刷新的状态
        mescroll.endErr();
      }
    })
  }
  function render(data)
  {
    var html ='';
    $.each(data,function (index,value) {
      console.log(value);
      html +='<li><a><p class="number">单据编号：<span style="color: #333;font-size: 0.3rem;">'+value.num
      	+'</span><span class="num_right shenpi">'+value.state
      	+'</span></p><p class="info">'+value.title
      	+'</p><p class="info">'+value.money
      	+'</p><div class="date"><span class="date_left">采购人员：'+value.create
      	+'</span><span class="date_right">'+value.updatetime+'</span></div></a></li>';
    });
    return html;
  }
</script>
</html>
